import { useSize, useUpdate } from "ahooks";
import { useEffect, useLayoutEffect, useRef } from "react";
import { useForm } from "../../../framework/common/context/metadata-context";
import eventBus, { useSubscribe } from "../../../framework/common/eventBus";
import { fieldFilter, fieldFilterNormal } from "../../../framework/common/utils/filter";
import jQuery from "jquery";
import cloneDeep from 'lodash/cloneDeep'
export default function ColGroup({ data, scale, group, isFiexedTable = false, isFromFixedTable = false, wrapperRef, fixedColum = 999, fields }) {
  const form = useForm();
  const colgroupRef = useRef();
  const updater = useUpdate();

  //编辑模式下子表删除列
  let operationCell = undefined;
  // if(form.isDesign&&group.isDelete&&isFromFixedTable!==true){
  //   operationCell=<col style={{minWidth:"64px", width:"64px" ,maxWidth:"64px"}}></col>
  // }

  useSubscribe(group.code + ".ready", () => {
    if (isFiexedTable === true && fixedColum !== 999) {
      updater();
    }
  });

  // const size = useSize(colgroupRef);

  // if (isFromFixedTable){
  //   console.log("colgroupRef in",size,isFromFixedTable,scale)
  //   if(size?.width&&size.width>group.style.width && scale>1){
  //     scale=size.width/group.style.width
  //     console.log("colgroupRef",size?.width,scale,group.style.width)
  //   }

  // }
  useEffect(() => {
    //main 无数据模式下的header宽度计算
    if (isFiexedTable === true && isFromFixedTable === false && (fixedColum == 999 || (fixedColum == 998 && data && data.length === 0))) {
      const ref = colgroupRef.current;
      ref.childNodes.forEach((c, index) => {
        let width = jQuery(c).width();
        group.cachedWidth[index] = { width: width };
      });

      if (fixedColum == 998 && data && data.length === 0) {
      } else {
        eventBus.publish(group.code + ".ready");
      }
    }
  });

  // useLayoutEffect(() => {
  //   if (isFiexedTable === true && fixedColum === 999) {
  //     const ref = colgroupRef.current;
  //     ref.childNodes.forEach((c, index) => {
  //       let width = jQuery(c).width();
  //       // console.log(group.code, c.style.width,width)
  //       if (width === 0) {
  //         //col元素比较特殊，在IE和360下是拿不到getBoundingClientRect，只能从style里面取
  //         width = c.style.width;
  //       } else {
  //         width += "px";
  //       }
  //       group.cachedWidth[index] = { width:  c.style.width *scale };
  //     });
  //   }
  // });

  let allRowHiddenCount = 0;
  let normalFilterFields = fields.filter(fieldFilterNormal);
  let fixedColumCount = fixedColum;
  normalFilterFields.forEach((field, index) => {
    if (field.isAllRowhidden === true && index <= fixedColum) {
      allRowHiddenCount++;
    }
  });
  fixedColumCount = fixedColumCount - allRowHiddenCount;
  return (
    <colgroup ref={colgroupRef}>
      {fields.filter(fieldFilter).map((field, index) => {
        if (index >= fixedColumCount) return null;
        var colStyle = {};
        //如果计算样式报错，不要影响流程审批
        try {
          if (isFromFixedTable && fixedColum !== 999 && fixedColum !== 998 && group.cachedWidth[index]) {
            if (group.cachedWidth[index]) colStyle = group.cachedWidth[index];
          } else if (field?.style?.width) {
            colStyle.width = parseInt(field.style.width * scale);
          } else {
            colStyle.width = parseInt(85 * scale);
          }
          if (field.isHidden === true) {
            colStyle["display"] = "none";
          }
        } catch (error) {
          console.warn("样式计算报错", error);
        }

        return <col key={index} style={cloneDeep(colStyle)}></col>;
      })}
      {operationCell}
    </colgroup>
  );
}
